/*
 * @Author: LBH 1336709799@qq.com
 * @Date: 2025-02-06 17:09:07
 * @LastEditors: LBH 1336709799@qq.com
 * @LastEditTime: 2025-02-06 17:18:48
 * @FilePath: \jike\src\pages\Home\components\BarChart.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
// 柱状图组件

// 把功能代码都放到这个组件中
// 把可变的部分抽象成prop参数


import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';

const BarChart = ({title}) => {
        const charRef = useRef(null)
    useEffect(() => {
         // 保证dom可用才进行图表的渲染
         // 获取渲染图表的dom节点
    // const chartDom = document.getElementById('main');
    const chartDom = charRef.current;
    // 图表初始化生成图表实例对象
    const myChart = echarts.init(chartDom);
    
    
    // 准备图表参数
    const option = {
      title:{
        text: title
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar'
        }
      ]
    };
   // 使用图表参数完成渲染
   option && myChart.setOption(option)
})
  return <div ref={charRef} style={{width:'500px',height:'400px'}}></div>
}

export default BarChart